<template>
    <div id="BackupRecovery">

        <div class="broad">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item>数据备份管理</el-breadcrumb-item>
                <el-breadcrumb-item>备份恢复</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="searchBar demo-input-suffix">
            <span>备份名称</span>
            <el-input
                    size="medium"
                    width="100"  v-model="setFind.configName">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <span class="margin_left">备份方式</span>
<!--            <el-input size="mini">-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--            </el-input>-->
            <el-select size="medium" v-model="setFind.configMode" placeholder="请选择备份方式">
                  <el-option  size="medium"  label="按库备份" value="0"></el-option>
                  <el-option  size="medium"  label="按表备份" value="1"></el-option>
            </el-select>
            <span class="margin_left">备份周期</span>
<!--            <el-input size="mini">-->
<!--                <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--            </el-input>-->
                <el-select size="medium" v-model="setFind.configCycle" placeholder="请选择备份周期">
                    <el-option  size="medium"  label="年/次" value="0"></el-option>
                    <el-option  size="medium"  label="月/次" value="1"></el-option>
                    <el-option  size="medium"  label="日/次" value="2"></el-option>
                    <el-option  size="medium"  label="周/次" value="3"></el-option>
                </el-select>
            <el-button type="goon" round @click="findData"
                       size="medium"   icon="el-icon-search">
                查找
            </el-button>
            <el-button type="goon" round @click="reSetData"
                       size="medium"   icon="el-icon-refresh">
                重置
            </el-button>
        </div>
        <div id="thebackuprecovery">
            <template>
                <el-table
                        :data="backupRecovery"
                        border
                        style="width: 100%"
                        height="100%"
                        :stripe="true"
                        >
                    <el-table-column
                            fixed
                            prop="ID"
                            label="序号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="configName"
                            label="备份名称"
                            width="240">
                    </el-table-column>
                    <el-table-column
                            prop="Mode"
                            label="备份方式"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="runMethod"
                            label="执行方式"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="备份库/表"
                            width="160">
                    </el-table-column>
                    <el-table-column
                      prop="Cycle"
                      label="备份周期"
                      width="160">
                    </el-table-column>
                    <el-table-column
                            prop="startDate"
                            label="启动时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="endDate"
                            label="结束时间"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="currentTime"
                            label="最近备份时间"
                            width="190">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作">
                        <template slot-scope="scope">
                          <el-tooltip class="item" effect="light" content="恢复数据备份" placement="top">
                               <el-button v-has="'beifenhuifu'" @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-refresh-right"></i></el-button>
                          </el-tooltip>
<!--                            <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-refresh-right"></i></el-button>-->
                          <el-tooltip class="item" effect="light" content="删除数据" placement="top">
                            <el-button
                              size="mini"
                              type="danger" v-has="'beifenshanchu'"
                              @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
                          </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
              <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage1"
                  :page-sizes="[15,20,30,50]"
                  :page-size="15"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total=backupConfigTotalCount>
                </el-pagination>
              </div>
            </template>
        </div>
    </div>
</template>

<script>
  import {createNamespacedHelpers } from 'vuex'
  const { mapGetters } = createNamespacedHelpers('dirmanage')
    export default {
        name: "TheBackupRecovery",
        data(){
          return{
            currentPage1: 1,
            selectDBName:'',
            selectBackUpCycle:'',
            configName:'',
            setFind:{
              pageNumber:1,
              pageSize:15,
              configName:'',
              configMode:'',
              configCycle:''
            },
            backupRecoveryList:[
              {
                id:1,
                STHXBH:'测试',
                STHXMM:'表备份',
                District:'定时备份',
                STHXLX:'360',
                STHXLXBM:'2020-12-23',
                STHXLXBM2:'2020-06-23',
                STHXLXBM3:'无'
              }
            ]
          }
       },
        methods:{
          async handleClick(row) {
                console.log(row);
                await  this.$store.dispatch('dirmanage/getBackUpResume',{id:row.IDs})
                if(this.backUpConfigMessage){
                   this.$message.success(this.backUpConfigMessage)
                }
                else{
                  this.$message.error("备份恢复失败！")
                }
            },
            reSetData(){
              this.setFind.configName = ''
              this.setFind.configMode = ''
              this.setFind.configCycle = ''
              this.$store.dispatch('dirmanage/getBackUpConfig',this.setFind)
            },
            handleSizeChange(val) {
              this.setFind.pageSize = val
              console.log(`每页 ${val} 条`);
              console.log(this.setFind)
              this.$store.dispatch('dirmanage/getBackUpConfig',this.setFind)
            },
            handleCurrentChange(val) {
              this.setFind.pageNumber = val
              console.log(`当前页: ${val}`);
              console.log(this.setFind)
              this.$store.dispatch('dirmanage/getBackUpConfig',this.setFind)
            },
            // handleEdit(index, row) {
            //     console.log(index, row);
            // },
            // handleDelete(index, row) {
            //     console.log(index, row);
            //
            // },
          handleDelete(index, row) {
            // console.log(index, row);
            console.log(row.IDs)
            const pageObj = this.pageObj
            this.$store.dispatch('dirmanage/deleteBackupRecoveryList',{deleteId:row.IDs,'pageObj':this.setFind})
          },
          findData(){
              console.log(this.setFind)
              this.$store.dispatch('dirmanage/getBackUpConfig',this.setFind)
          }
        },

      computed:{
        ...mapGetters(['backupConfigTotalCount']),
        ...mapGetters(['backupRecovery']),
        ...mapGetters(['backUpConfigMessage'])
      },
      mounted() {
          this.$store.dispatch('dirmanage/getBackUpConfig',this.setFind)

      }
    }
</script>

<style scoped lang="scss">
   /*.block{*/
   /*  margin-top: 10px;*/
   /*}*/
    #BackupRecovery{
        position: absolute;
        left: 15.5%;
        //height: 87%;
        top: 9.5%;
        bottom: 1.5%;
        width: 83.5%;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 5px #acc4fe;
    }
    .broad{
        position: absolute;
        width: 98%;
        display: inline-block;
        padding: 1%;
        color: black;
        font-size: 20px;
        border-bottom: 2px solid #e9eef3;
        background-color: #ffffff;
        border-radius: 8px 8px 0 0 ;
    }
    .searchBar{
        display: inline-block;
        /*margin-left: 80px;*/
    }
    .searchBar > span{
        padding: 10px;
        font-size: 14px;
    }
    .searchBar > .el-input{
      width: 15%!important;
    }
    /*.el-input{*/
    /*    width: 15%!important;*/

    /*}*/
     .demo-input-suffix{
        /*margin-bottom: 12px;*/
        position: absolute;
        top: 50px;
        /*display: none;*/
        background-color: #ffffff;
        padding: 0.5%;
        width: 99%;
        /*border-bottom:2px solid #e9eef3 ;*/
    }
    .el-button{
        margin-left: 10px;
        font-size: 14px!important;
    }
    .el-button+.el-button {
        margin-left: 10px;
    }
    #backup{
        position: absolute;
        left: 80%;
        display: inline-block;
    }
    #thebackuprecovery{
        position: absolute;
        top: 100px;
        width: 99%;

        padding: 0.5%;
        height: calc(100% - 147px);
    }
   ::v-deep  .cell{
        text-align: center;
    }
   ::v-deep  .el-table td{
        padding: 7px 0 ;
    }
   ::v-deep  .el-table__body-wrapper {
      /*height: 200px; !* 滚动条整体高 必须项 *!*/
      border-right: none;
      overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
    }
   ::v-deep  .el-dialog--center .el-dialog__body{
      padding: 10px;
    }
   ::v-deep  .el-table__body-wrapper::-webkit-scrollbar {
      width:6px;/* 滚动条的宽高 必须项 */
      height: 5px;
    }

   ::v-deep  .el-table__body-wrapper::-webkit-scrollbar-thumb {
      background-color: #bfcbd9;/* 滚动条的宽 */
      border-radius: 3px;
    }
   span{
     color: #203f6e;
     font-size: 14px;
   }


   .searchBar{
   .el-button:focus, .el-button:hover {
     color: #fff;
     border-color: #c6e2ff;
     background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
   }
   .el-button--goon:active {
     color: #fff;
     border-color: #c6e2ff;
     outline: 0;
   }
     ::v-deep  .el-input__inner{
       border-radius: 45px;

     }
   }


</style>
